<template>
    <el-row class="home" :gutter="20">
        <el-col :span="8" style="margin-top: 20px">
            <el-card shadow="hover">
                <div class="user-info">
                    <img src="../../assets/images/user.png" alt=""/>
                    <div class="uerinfo">
                    <p class="name">{{user.name}}</p>
                    <p class="role">{{ user.grades.name }}</p>
                </div>
                </div>
                <div class="login-info">
                    <p>专业:<span>{{ user.grades.teacher.name}}</span></p>
                    <p>班主任:<span>{{ user.grades.teacher.name}}</span></p>
                </div>
            </el-card>
            <el-card shadow="hover" style="margin-top: 20px" height="450px">
                <el-table :data="tableData">
                    <el-table-column 
                    v-for="(val,key) in tableLabel" 
                    :key="key" 
                    :prop="key" 
                    :label="val"
                    >

                    </el-table-column>
                </el-table>
            </el-card>

        </el-col>
        <el-col :span="16" style="margin-top: 20px;">
            <div class="nu">
                <el-card
                :body-style="{display:'flex', padding:0}"
                v-for="item in countData"
                :key="item.name"
                >
                <component class="icons"
                :is="item.icon" 
                :style="{background : item.color}"
                >
                </component>
                <div class="detail">
                <p class="num">￥{{ item.value }}</p>
                <p class="txt">{{ item.name }}</p>
                </div>
            </el-card>
            </div>
            <el-card style="height: 280px;">
                <div ref="echart" style="height: 280px;"></div>
            </el-card>

            <div class="graph">
                <el-card style="height: 260px;">
                    <div ref="userechart" style="height: 240px;"></div>
                </el-card>
                <el-card style="height: 260px;">
                    <div ref="videoechart" style="height: 240px;"></div>
                </el-card>
            </div>
        </el-col>
    </el-row>
</template>
<script>
import {defineComponent,getCurrentInstance,onMounted,reactive,ref} from 'vue';
import * as echarts from 'echarts'
import { useStore } from "vuex";
export default defineComponent({
    setup() {
        const store = useStore();
        const {proxy} =getCurrentInstance();
        store.commit('getUser')
        const user = store.state.user;
        let tableData=ref([]);
        let countData=ref([]);
        const tableLabel={
            name:'课程',
            todayBuy:'今日购买',
            monthBuy:'本月购买',
            totalBuy:'总购买',
        };
        const getTableList= async ()=>{
            // await axios.get("https://www.fastmock.site/mock/22eb06ef7dd9975f5938e84ff04088d3/api/honme/getTableData")
            // .then((resp)=>{
            //     //二次封装axios
            //  console.log(resp)
             
            //  if(resp.data.code == 200){
            //     tableData.value=resp.data.data;
            //  }
            // })
            let res=await proxy.$api.getTableData();
            // console.log(res)
            tableData.value=res
        };
            //获取首页count的数据
        const getCountData = async ()=>{
            let res=await proxy.$api.getCountData()
            countData.value=res;

        };
        
        onMounted(()=>{
            
            getTableList();
            //获取count数据
            getCountData();

            getEchartData();
            
        });
        let xOptions=reactive({
            // 图例文字颜色
        textStyle: {
            color: "#333",
        },
        grid: {
         left: "20%",
        },
        // 提示框
        tooltip: {
         trigger: "axis",
        },
        xAxis: {
            type: "category", // 类目轴
            data: [],
            axisLine: {
            lineStyle: {
                color: "#17b3a3",
            },
            },
        axisLabel: {
          interval: 0,
          color: "#333",
        },
        },
         yAxis: [
         {
            type: "value",
            axisLine: {
            lineStyle: {
              color: "#17b3a3",
             },
            },
         },
        ],
        color: ["#2ec7c9", "#b6a2de", "#5ab1ef", "#ffb980", "#d87a80", "#8d98b3"],
        series: [],
        });
        let pieOptions=reactive({
            tooltip: {
        trigger: "item",
      },
      color: [
        "#0f78f4",
        "#dd536b",
        "#9462e5",
        "#a6a6a6",
        "#e1bb22",
        "#39c362",
        "#3ed1cf",
      ],
      series: [],
        })
        let orderData=reactive({
            xData:[],
            series:[],
        });
        let userData=reactive({
            xData:[],
            series:[],
        });
        let videoData=reactive({
            series:[],
        });

        //获取数据
        const getEchartData = async()=>{
            let result=await proxy.$api.getEchartData();
            // console.log(result);
            let res=result.orderData;
            let userRes=result.userData;
            let videoRes=result.videoData;
            orderData.xData=res.date
            const keyArray=Object.keys(res.data[0]);
            const series=[];
            keyArray.forEach((key)=>{
                series.push({
                    name:key,
                    data:res.data.map(item=>item[key]),
                    type:"line",
                });
            });
            orderData.series=series;
            xOptions.xAxis.data=orderData.xData;
            xOptions.series=orderData.series;
            //图表进行渲染
            //userData
            let hEcharts=echarts.init(proxy.$refs['echart']);
            hEcharts.setOption(xOptions);

            //柱状图进行渲染
            userData.xData=userRes.map(item=>item.date);
            userData.series=[
                {
                    name:'新增用户',
                    data:userRes.map(item=>item.new),
                    type:"bar",
                },
                {
                    name:'活跃用户',
                    data:userRes.map(item=>item.active),
                    type:"bar",
                },
            ];

            xOptions.xAxis.data=userData.xData;
            xOptions.series=userData.series;

            let uEcharts=echarts.init(proxy.$refs['userechart']);
            uEcharts.setOption(xOptions);

            videoData.series=[
                {
                    data:videoRes,
                    type:'pie',
                },
            ];
            pieOptions.series=videoData.series;
            let vEcharts=echarts.init(proxy.$refs['videoechart']);
            vEcharts.setOption(pieOptions);
        };

        return{
            tableData,
            tableLabel,
            countData,
            user
        };
    },
})
</script>

<style lang="less" scoped>
.home{
    .user-info{
            display: flex;
            align-items: center;
            padding-bottom: 20px;
            border-bottom: 1px solid #ccc;
            margin-bottom: 25px;
            img{
                width: 150px;
                height: 150px;
                border-radius: 50%;
                margin-right: 40px;
            }
        }
        .login-info{
        p{
            line-height: 30px;
            font-size: 14px;
            color: #999;
            span{
                color: #666;
                margin-left: 60px;
            }
        }
    }
    .nu{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        .el-card{
            width: 32%;
            margin-bottom: 20px;
            .el-card__body{
            display: flex;
            flex-direction: row;
            }
        }
        .icons{
            width: 80px;
            height: 80px;
            font-size: 30px;
            text-align: center;
            line-height: 80px;
            color: #fff;
        }
        .detail{
            white-space: nowrap;
            margin-left: 15px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            .num{
                font-size: 30px;
                margin-bottom: 10px;
            }
            .txt{
                font-size: 14px;
                text-align: center;
                color: #999;
            }
        }
    }
    .graph{
        margin-top: 30px;
        display: flex;
        justify-content: space-between;
        .el-card{
            width: 48%;
        }
    }
}

    

</style>